<template>
  <div class="largeScreen">
    <div class="headerBox">
      <div class="frc pt30 pr20">
        <div class="flc tabsBox">
          <div class="tabsItemBg cur f14 fcc flex-1" :class="tabIdx == idx ? 'selectTabsItemBg' : ''"
               v-for="(item, idx) in tablist" @click="tabsFun(idx)">
            <div>{{ item.name }}</div>
            <div class="down_line"></div>
          </div>
        </div>
        <div class="fcc">
          <div class="flc ml20">
            <div class="cblue">{{ currentDate }}</div>
            <div class="cwhite ml20">{{ currentTime }}</div>
            <div class="cblue"></div>
          </div>
        </div>
      </div>
        <!-- 添加光束元素 -->
      <div class="light-beam"></div>
    </div>
    <div class="fcc map-box">
      <mapBox></mapBox>
    </div>
    <div class="chartBox">
      <div class="fcbc fv h1 flex-2 chartLeft">
        <div class="flex-1 flc fv w1">
          <div class="chartTile flc">
            <div class="title-text">风机数量</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 mt10 itemBoxBg">
              <barChart :xAxisData="fjslData" :seriesData="fjslData1" :className="'chart'" :height="'100%'"
                        :width="'100%'" :unit="'台'" :dataName="'数量'"></barChart>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1">
          <div class="chartTile flc">
            <div class="title-text">实时发电功率</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1 mt10 itemBoxBg">
              <barChartGl :xAxisData="fdglData" :seriesData="fdglData1" :className="'chart'" :height="'100%'"
                          :width="'100%'" :unit="'万kw'" :dataName="'功率'"></barChartGl>
            </div>
          </div>
        </div>
        <div class="mt20 flex-1 flc fv w1 rel">
          <div class="chartTile flc">
            <div class="title-text">发电量</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="leftThreeSelect">
            <el-select v-model="leftThreeValue" placeholder="请选择" :popper-append-to-body="false" @change="handleSelChange">
              <el-option v-for="item in leftThreeOptions" :key="item.name" :label="item.name" :value="item.windFarmId">
              </el-option>
            </el-select>
          </div>
          <div class="fcbc w1 p10 itemBoxBg">
            <div class="flc" v-for="(item, key) in electricityData" :key="key">
              <div class="icon-electricity fcb" style="position: relative;">
                <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan4 rotating-circle"
                    style="height: 50px;width: 52px;min-height: 50px;min-width: 52px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/8.png`)"
                    fit="fill" class="quan8"
                    style="height: 52px;width: 50px;min-height: 52px;min-width: 50px;">
                  </el-image>

                <div class="ml20 wzz">{{ key === "dr" ? "日" : key === "dy" ? "月" : "年" }}</div>
              </div>
              <div class="ml5">
                <div class="cgray">{{ key === "dr" ? "当日" : key === "dy" ? "当月" : "当年" }}</div>
                <div class="flc mt5">
                  <count-to  v-if="showConcentTop1"
                    class="cwhite f14"
                    :start-val="0"
                    :end-val="Number(item)"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <div class="cgray ml5" style="font-size: 10px;">万kwh</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 w1 fcbc fv">
            <div class="flex-1 w1">
              <lineChart dataName="时间" :chartData="fdlData" style="position: relative;z-index: 999999;background-color: #010e22;"></lineChart>
            </div>
          </div>
        </div>
      </div>

      <div class="w1 fcbc fw concentTop concentBox1" v-if="showConcentTop">
        <div class="flc flex3 mb20 " v-for="(item, idx) in topList" :key="idx">
          <div class="cur flc ">

            <div class="icon-all-box" :style="{ 'background-image': `url(${item.icon})` }"></div>


            <div class="ml5">
              <div class="flc">
                <count-to
                  class="cwhite f20"
                  :start-val="0"
                  :end-val="Number(item.num)"
                  :duration="3000"
                  :autoplay="true"
                ></count-to>
                <div class="cgray ml5">{{ item.unit }}</div>
              </div>
              <div class="cgray mt5">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <tableList :dialogVisible.sync="dialogVisible" :gjzt="gjzt"></tableList>

      </div>
      <!-- <div class="w1 fcbc concentBottom concentBox">
        <div class="flc flex-1 mr20 cur" @click="gotoVideo()">
          <div class="videoBox">
            <div class="videoContent"></div>
            <div class="fcc cwhite mt8">AI-视频监控室</div>
          </div>
        </div>
        <div class="flc flex-1 mr20 cur" @click="gotoVideo()">
          <div class="videoBox">
            <div class="videoContent"></div>
            <div class="fcc cwhite mt8">AI-视频监控室</div>
          </div>
        </div>
        <div class="flc flex-1 mr20 cur" @click="gotoVideo()">
          <div class="videoBox">
            <div class="videoContent"></div>
            <div class="fcc cwhite mt8">AI-视频监控室</div>
          </div>
        </div>
        <div class="flc flex-1 cur" @click="gotoVideo()">
          <div class="videoBox">
            <div class="videoContent"></div>
            <div class="fcc cwhite mt8">AI-视频监控室</div>
          </div>
        </div>
      </div> -->

      <div class="w1 fcbc concentBottom concentBox" style="z-index: 2;">
        <div
          class="flc flex-1 mr20 cur tty"
          v-for="(device, index) in getCurrentVideoGroup()"
          :key="device.id"
          @click="gotoVideo(device)">
          <div class="videoBox">
            <div class="videoContent">
              <!-- 条件判断：当 device.pic 存在且不为空时显示接口返回的图片，否则显示默认图片 -->
              <el-image
                v-if="device.pic && device.pic.trim() !== ''"
                :src="device.pic"
                fit="fill"
                style="height: 98px;width: 100%;">
              </el-image>
              <el-image
                v-else
                :src="require(`@/assets/images/windPower/video1.png`)"
                fit="fill"
                style="height: 98px;width: 100%;">
              </el-image>
            </div>
            <div class="fcc cwhite mt8">{{ device.label }}</div>
          </div>
        </div>
      </div>
      <div class="fcbc fv h1 flex-2 righBox">
        <div class="flex-1 flc fv w1 rel">
          <div class="chartTile flc">
            <div class="title-text">节能减排</div>
            <!-- 添加两条光束 -->
            <div class="light-beam beam-1"></div>
            <div class="light-beam beam-2"></div>
          </div>
          <div class="leftThreeSelect">
            <el-select v-model="leftThreeValue1" placeholder="请选择" :popper-append-to-body="false">
              <el-option v-for="item in leftThreeOptions1" :key="item.name" :label="item.name"
                         :value="item.windFarmId">
              </el-option>
            </el-select>
          </div>
          <div class="fcbc w1 p10">
            <div class="flc">
              <div class=" fcb rel">
                  <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan3 rotating-circle"
                    style="height: 40px;width: 42px;min-height: 40px;min-width: 42px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/7.png`)"
                    fit="fill" class="quan7"
                    style="height: 39px;width: 54px;min-height: 39px;min-width: 54px;">
                  </el-image>
                <div class="rsubtex f12">累计</div>
                <!-- <div class="rsubtex f12">--</div> -->
              </div>
              <div class="ml10">
                <div class="flb mt5">
                  <div class="cgray fontMin">减排CO₂</div>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <!-- <div class="cwhite fontMin">650000</div> -->
                  <count-to  v-if="showConcentTopa"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="650000"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <div class="cgray fontMin">m³</div>
                </div>
                <div class="flb mt5">
                  <div class="cgray fontMin">节约标煤</div>
                  <!-- <div class="cwhite fontMin">535.89</div> -->
                  <count-to  v-if="showConcentTopb"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="105535"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <div class="cgray fontMin">吨</div>
                </div>
              </div>
            </div>
            <div class="flc">
              <div class=" fcb rel">
                  <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan3 rotating-circle"
                    style="height: 40px;width: 42px;min-height: 40px;min-width: 42px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/7.png`)"
                    fit="fill" class="quan7"
                    style="height: 39px;width: 54px;min-height: 39px;min-width: 54px;">
                  </el-image>
                <div class="rsubtex f12">当年</div>
                <!-- <div class="rsubtex f12">--</div> -->
              </div>
              <div class="ml10">
                <div class="flb mt5">
                  <div class="cgray fontMin">减排CO₂</div>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <!-- <div class="cwhite fontMin">600000</div> -->

                  <count-to  v-if="showConcentTopc"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="600000"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <div class="cgray fontMin">m³</div>
                </div>
                <div class="flb mt5">
                  <div class="cgray fontMin">节约标煤</div>
                  <!-- <div class="cwhite fontMin">500</div> -->

                  <count-to  v-if="showConcentTopd"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="105000"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <div class="cgray fontMin">吨</div>
                </div>
              </div>
            </div>
            <div class="flc">
              <div class=" fcb rel">
                  <el-image
                    :src="require(`@/assets/quan/quan3.png`)"
                    fit="fill" class="quan3 rotating-circle"
                    style="height: 40px;width: 42px;min-height: 40px;min-width: 42px;">
                  </el-image>
                  <el-image
                    :src="require(`@/assets/quan/7.png`)"
                    fit="fill" class="quan7"
                    style="height: 39px;width: 54px;min-height: 39px;min-width: 54px;">
                  </el-image>
                <div class="rsubtex f12">当月</div>
                <!-- <div class="rsubtex f12">--</div> -->
              </div>
              <div class="ml10">
                <div class="flb mt5">
                  <div class="cgray fontMin">减排CO₂</div>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <!-- <div class="cwhite fontMin">50000</div> -->

                  <count-to  v-if="showConcentTope"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="50000"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <div class="cgray fontMin">m³</div>
                </div>
                <div class="flb mt5">
                  <div class="cgray fontMin">节约标煤</div>
                  <!-- <div class="cwhite fontMin">35.89</div> -->

                  <count-to  v-if="showConcentTopf"
                    class="cwhite fontMin"
                    :start-val="0"
                    :end-val="535"
                    :duration="3000"
                    :autoplay="true"
                  ></count-to>
                  <!-- <div class="cwhite fontMin">--</div> -->
                  <div class="cgray fontMin">吨</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex-1 w1 fcbc fv itemBoxBg">
            <div class="flex-1 w1" style="height: 100%;">
              <lineChartRight :unit="'m³、吨'"></lineChartRight>
            </div>
          </div>
        </div>
        <div class="flex-2 flc fv w1">
          <div class="flex-2 flc fv w1 rel">
            <div class="chartTile flc">
                <div class="title-text">发电等效时排行</div>
                <!-- 添加两条光束 -->
                <div class="light-beam beam-1"></div>
                <div class="light-beam beam-2"></div>
            </div>
            <div class="tabSelect">
              <el-radio-group v-model="tabPosition" @change="handleTabChange">
                <el-radio-button label="0">日均</el-radio-button>
                <el-radio-button label="1">月均</el-radio-button>
              </el-radio-group>
            </div>
            <div class="w1 pt10 pb20 h1 itemBoxBg">
              <el-table :data="tableData" style="width: 100%; height: 100%" :row-class-name="tableRowClassName">
                <el-table-column prop="ranking" align="center" label="排名">
                  <template slot-scope="scope">
                    <el-image v-if="scope.row.ranking <= 3" style="height: 15px"
                              :src="require(`@/assets/images/icon/top-${scope.row.ranking}.png`)" fit="fill"></el-image>
                    <div class="fcc" v-else>{{ scope.row.ranking }}</div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="电场名称"></el-table-column>
                <el-table-column prop="power" align="center" label="发电量(kwh)"></el-table-column>
                <el-table-column prop="time" align="center" label="小时"></el-table-column>
              </el-table>
            </div>
          </div>
          <transition name="el-zoom-in-center">
            <div class="videoBox1">
              <div v-show="zoomInCenter" class="fullScreenBox fcc w1 h1">
                <div class="flex-1" style="z-index: 999; height: calc(100% - 110px); position: absolute; bottom: 35px; width: 100%;">
                  <div class="fcbc w1 videoTitle">
                    <div class="cwhite">{{ currentCamera.name }}</div>
                    <div class="cur" @click="lessenFun">
                      <el-image style="width: 20px; height: 20px" :src="require(`@/assets/images/icon/videoBack.png`)"
                                fit="fill"></el-image>
                    </div>
                  </div>
                  <div class="flex-1 w1 previewBox flv-container video-container" style="height: 100%;">
                    <video
                      ref="videoPlayer"
                      width="100%"
                      height="100%"   class="vertical-video"
                      style="max-height: 880px;background-color: #000000;"
                      controls
                      autoplay
                      @loadstart="isLoading = true"
                      @canplay="isLoading = false"
                      @error="handleVideoError"
                    >
                      <source :src="currentCamera.url" type="video/mp4"/>
                      您的浏览器不支持 HTML5 video 标签。
                    </video>
                      <!-- 自定义加载提示 -->
                    <div v-if="isLoading" class="loading-overlay">
                      <div class="loading-text">视频加载中...</div>
                    </div>

                    <!-- 错误提示 -->
                    <div v-if="loadError" class="error-overlay">
                      <div class="error-text">视频加载失败</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
          <div class="flex-1 flc fv w1">
            <div class="chartTile flc">
                <div class="title-text">故障情况</div>
                <!-- 添加两条光束 -->
                <div class="light-beam beam-1"></div>
                <div class="light-beam beam-2"></div>
            </div>
            <div class="fcbc w1 mt20" v-show="gzqkShow">
              <div class="icon-rt-bg flex-1 mr20 fcc cur" @click="openTable('运行中')">
                <div>
                  <div>
                    <el-image style="width: 66px; height: 66px;min-width: 66px; min-height: 66px" :src="require(`@/assets/images/icon/icon-rt-1.png`)"
                              fit="fill"></el-image>
                  </div>
                  <div>
                    <div class="cgray fcc f12 mt10 mb10">运行中</div>
                     <div class="cwhite f20 fcc">{{ gzqkData.yxz }}</div>
                  </div>
                </div>
              </div>
              <div class="icon-rt-bg flex-1 mr20 fcc cur" @click="openTable('离线')">
                <div>
                  <div>
                    <el-image style="width: 66px; height: 66px;min-width: 66px; min-height: 66px" :src="require(`@/assets/images/icon/icon-rt-2.png`)"
                              fit="fill"></el-image>
                  </div>
                  <div>
                    <div class="cgray fcc f12 mt10 mb10">离线</div>
                     <div class="cwhite f20 fcc">{{ gzqkData.lx }}</div>
                  </div>
                </div>
              </div>
              <div class="icon-rt-bg flex-1 mr20 fcc cur" @click="openTable('检修')">
                <div>
                  <div>
                    <el-image style="width: 66px; height: 66px;min-width: 66px; min-height: 66px" :src="require(`@/assets/images/icon/icon-rt-3.png`)"
                              fit="fill"></el-image>
                  </div>
                  <div>
                    <div class="cgray fcc f12 mt10 mb10">检修</div>
                     <div class="cwhite f20 fcc">{{ gzqkData.jx }}</div>
                  </div>
                </div>
              </div>
              <div class="icon-rt-bg flex-1 fcc cur" @click="openTable('故障')">
                <div>
                  <div>
                    <el-image style="width: 66px; height: 66px;min-width: 66px; min-height: 66px" :src="require(`@/assets/images/icon/icon-rt-4.png`)"
                              fit="fill"></el-image>
                  </div>
                  <div>
                    <div class="cgray fcc f12 mt10 mb10">故障</div>
                     <div class="cwhite f20 fcc">{{ gzqkData.gz }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mapBox from "./map.vue";
import axios from 'axios'
import barChart from "./chart/barChart.vue";
import barChartGl from "./chart/barChartGl.vue";
import lineChart from "./chart/lineChart.vue";
import lineChartRight from "./chart/lineChart-right.vue";
import tableList from "./tableListJs.vue";
import {getList, getFetchData, getPanoramicRanking} from "@/api/dp/qjjs"
import {rightList} from "@/api/dp/jkdp"
import {devicesWarningData, powerGenerationTrendList,getlistFarm} from "@/api/dp/cockpit";
// 引入flv.min.js
import flvjs from 'flv.js';
import CountTo from 'vue-count-to';
import { Dropdown } from "element-ui";

export default {
  name: "operation",
  components: {mapBox, barChart, barChartGl, lineChart, lineChartRight, tableList,CountTo},
  data() {
    return {
      showConcentTop: true,
      showConcentTop1: true,
      showConcentTopa: true,
      showConcentTopb: true,
      showConcentTopc: true,
      showConcentTopd: true,
      showConcentTope: true,
      showConcentTopf: true,
      currentCamera: {
        name: "",
        url: "",
      },
      isLoading: false,
      loadError: false,
      zoomInCenter: false,
      gzqkShow:true,
      // 风机数量x
      fjslData: [],
      // 风机数量y
      fjslData1: [],
      // 发电功率x
      fdglData: [],
      // 发电功率y
      fdgl1Data: [],
      // 发电量折线
      fdlData: [],
      // 发电量折线
      fdglData1: [],
      // 故障情况
      gzqkData: {
        yxz: "--",
        lx: "--",
        jx: "--",
        gz: "--",
      },
      // 节能减排上面六个
      energyData: {
        ljJp: 4522, // 累计减排CO₂
        ljBm: 345, // 累计节约标煤
        dnJp: 4522, // 当年减排CO₂
        dnBm: 345, // 当年节约标煤
        dyJp: 4522, // 当月减排CO₂
        dyBm: 345, // 当月节约标煤
      },
      // 发电量上面三个的数据
      electricityData: {
        dr: '--' , // 当日
        dy: '--', // 当月
        dn: '--', // 当年
      },
      currentDate: "",
      currentTime: "",
      dialogVisible: false,
      // 运行状态
      gjzt: "01",
      tabPosition: 0,
      tabIdx: 0,
      tablist: [
        {
          name: "全景监视",
          path: "/operation",
        },
        {
          name: "监控大屏",
          path: "/monitoring",
        },
        {
          name: "驾驶舱总览",
          path: "/cockpit",
        },
        {
          name: "数据监测",
          path: "/detection",
        },
        {
          name: "智能分析",
          path: "/analysis",
        },
      ],
      // 监控
      flvPlayer: null,
      // 中间上面那六个静态数据（图片、名称、单位）
      staticTopList: [
        {
          icon: require("@/assets/images/icon/icon-all-1.png"),
          name: "电场数量",
          unit: "个",
          key: "dcsl", // 对应接口字段
        },
        {
          icon: require("@/assets/images/icon/icon-all-2.png"),
          name: "总风机数量",
          unit: "台",
          key: "zzjrl",
        },
        {
          icon: require("@/assets/images/icon/icon-all-3.png"),
          name: "发电总功率",
          unit: "万kw",
          key: "zfdgl",
        },
        {
          icon: require("@/assets/images/icon/icon-all-4.png"),
          name: "总发电量",
          unit: "kwh",
          key: "zfdl",
        },
        {
          icon: require("@/assets/images/icon/icon-all-5.png"),
          name: "减排二氧化碳总量",
          unit: "㎡",
          key: "jpeyhtzl",
        },
        {
          icon: require("@/assets/images/icon/icon-all-6.png"),
          name: "节约标煤总量",
          unit: "吨",
          key: "jybmzl",
        },
      ],
      // 中间上面那六个动态数据（从接口获取）
      dynamicData: {
        dcsl: "--",
        zzjrl: "--",
        zfdgl: "--",
        zfdl: "--",
        jpeyhtzl: "--",
        jybmzl: "--",
      },
      tableData: [],
      leftThreeValue: "全部",
      leftThreeValue1: "全部",
      leftThreeOptions: [],
      leftThreeOptions1: [],
      videoDevices: [], // 初始化为空数组，通过API获取数据
      currentGroupIndex: 0,
      rotationInterval: null,
      rotationSpeed: 5000
    };
  },
  methods: {
    getPower(res) {

      // 发电量
      powerGenerationTrendList(res).then(response => {
        if(response.data.length>0){
          let dr = response.data[0].dr
          console.log(dr+'-');

          if(dr>0){
            this.electricityData.dr = dr
          } else {
            this.electricityData.dr = 0
          }
          let dy = response.data[0].dy
          if(dy>0){
            this.electricityData.dy = dy
          } else {
            this.electricityData.dy = 0
          }
          let dn = response.data[0].dn
          if(dn>0){
            this.electricityData.dn = dn
          } else {
            this.electricityData.dn = 0
          }
        } else {
          this.electricityData.dr = 0
          this.electricityData.dy = 0
          this.electricityData.dn = 0
        }
      })
    },
    handleTabChange() {
      getPanoramicRanking({type: this.tabPosition}).then(response => {
        this.tableData = response.data
      })
    },
    handleSelChange(res) {
      this.getPower(res);


    },
    // 关闭全屏时销毁播放器
    lessenFun() {
      this.destroyFlvPlayer();
      this.zoomInCenter = false;
      this.gzqkShow = true;
    },

    // 销毁 FLV 播放器
    destroyFlvPlayer() {
      if (this.flvPlayer) {
        try {
          // 暂停播放
          this.flvPlayer.pause();
          // 卸载资源
          this.flvPlayer.unload();
          // 分离媒体元素
          this.flvPlayer.detachMediaElement();
          // 销毁播放器（这会关闭 WebSocket 连接）
          this.flvPlayer.destroy();
        } catch (e) {
          console.error('销毁播放器时出错:', e);
        } finally {
          this.flvPlayer = null;
        }
      }
    },

    beforeDestroy() {
      // 组件销毁时也清理播放器
      this.destroyFlvPlayer();
      clearInterval(this.timer);
    },
    // 年月日时分秒
    updateDateTime() {
      const now = new Date();
      // 格式化日期（YYYY-MM-DD 星期X）
      const weekdays = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const weekday = weekdays[now.getDay()];
      this.currentDate = `${year}-${month}-${day} ${weekday}`;

      // 格式化时间（HH:MM:SS）
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      this.currentTime = `${hours}:${minutes}:${seconds}`;
    },
    // 打开表格
    openTable(type) {
      this.dialogVisible = true;
      this.gjzt= type;
    },
    tabsFun(i) {
      this.tabIdx = i;
      this.$router.push(this.tablist[i].path);
    },
    handleVideoError() {
      this.isLoading = false;
      this.loadError = true;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 1) {
        return "odd";
      }
      return "";
    },
    getCurrentVideoGroup() {
      const start = this.currentGroupIndex * 4
      return this.videoDevices.slice(start, start + 4)
    }, gotoVideo(row) {
      this.gzqkShow=false
      // 先关闭之前的播放器（如果存在）
      this.destroyFlvPlayer();
      this.currentCamera = {}
      this.currentCamera = {
        name: row.label,
        url: row.rtspUrl,
      },
      this.zoomInCenter = true
      // 使用 nextTick 确保 DOM 更新完成
      this.$nextTick(() => {
        if (flvjs.isSupported()) {
          const videoElement = this.$refs.videoPlayer;

          // 创建 FLV 播放器
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: this.currentCamera.url,
            isLive: true
          });

          // 附加到 video 元素
          this.flvPlayer.attachMediaElement(videoElement);

          // 加载并播放
          this.flvPlayer.load();
          this.flvPlayer.play().catch(e => {
            console.error('播放失败:', e);
          });

          // 监听错误事件
          this.flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
            console.error('FLV 播放错误:', errType, errDetail);
          });
        } else {
          this.$message.error('浏览器不支持 FLV 播放');
        }
      });
    },
    startRotation() {
      this.rotationInterval = setInterval(() => {
        const groupCount = Math.ceil(this.videoDevices.length / 4)
        this.currentGroupIndex = (this.currentGroupIndex + 1) % groupCount
      }, this.rotationSpeed)
    },
    stopRotation() {
      clearInterval(this.rotationInterval)
    },
    windfarm() {
      getlistFarm().then(response => {
        this.leftThreeOptions = response.rows; // 更新动态数据
        this.leftThreeOptions1 = response.rows; // 更新动态数据
        })
    },
    async aiQuerySelectorAll() {
      try {
        rightList().then(response => {
          this.videoDevices = response.rows
          this.currentGroupIndex = 0
        })
        // const response = await axios.get("/dev-api/fjfd/Devices/initList");
      } catch (error) {
        console.error("获取数据失败:", error);
      }
    },
    // 故障情况
    gzqk() {
      let that = this;
      devicesWarningData().then(response => {
        that.gzqkData =  response.data
      })
    },
    // 基础统计 中间部分
    baseCount(){
      let that = this ;
      getFetchData().then(response => {
        that.dynamicData = response.data
      })
    },
    // 获取有效功率
    getValid(){
      getList().then(response => {
        // 发电量折线
        if (response.data.power == null) {

        } else {
          this.fdlData = response.data.validList
        }
        // 风机数量x
        this.fjslData = response.data.plantNames
        // 风机数量y
        this.fjslData1 = response.data.installedCapacity
        // 发电功率x
        this.fdglData = response.data.plantNames
        // 发电功率y
        this.fdglData1 = response.data.validList
      })
    },
    //发电等效时排行
    fddxsph(){
      getPanoramicRanking({type: this.tabPosition}).then(response => {
        this.tableData = response.data
      })
    },
     // 向左切换
    slideLeft() {
      const container = document.querySelector('.concentBottom');
      const boxes = document.querySelectorAll('.tty');
      const containerWidth = container.offsetWidth;
      const boxWidth = boxes[0].offsetWidth + 20; // 20是margin

      // 计算需要移动的距离
      const moveDistance = Math.min(boxWidth, containerWidth);
      // 添加动画类
      container.style.transform = `translateX(-${moveDistance}px)`;
      container.style.transition = 'transform 0.5s ease-in-out';
      // 动画结束后重置位置（实现无限轮播）
      setTimeout(() => {
        // 将第一个元素移到末尾
        const firstBox = document.querySelector('.tty');
        container.appendChild(firstBox);
        // 重置位置
        container.style.transition = 'none';
        container.style.transform = 'translateX(0)';
        // 强制重绘
        void container.offsetWidth;
      }, 500);
    },

    // 向右切换
    slideRight() {
      const container = document.querySelector('.concentBottom');
      const boxes = document.querySelectorAll('.tty');

      // 将最后一个元素移到开头
      const lastBox = boxes[boxes.length - 1];
      container.insertBefore(lastBox, container.firstChild);

      // 设置初始位置（向左偏移一个盒子的宽度）
      const boxWidth = boxes[0].offsetWidth + 20;
      container.style.transition = 'none';
      container.style.transform = `translateX(-${boxWidth}px)`;

      // 强制重绘
      void container.offsetWidth;

      // 开始动画回到原位
      container.style.transition = 'transform 0.5s ease-in-out';
      container.style.transform = 'translateX(0)';
    },

    // 自动轮播
    startAutoPlay() {
      this.autoPlayInterval = setInterval(() => {
        this.slideLeft();
      }, 3000); // 3秒切换一次
    },

    // 停止自动轮播
    stopAutoPlay() {
      clearInterval(this.autoPlayInterval);
    },
    // 定时器15分钟加载一次
    // 增强版数据刷新方法
    async refreshData() {
      try {
        await Promise.all([
          this.baseCount(),
          this.getValid(),
          this.getPower(""),
          this.startAutoPlay(),
          this.gzqk(),
          this.fddxsph(),
          this.aiQuerySelectorAll(),
          this.windfarm(),
          this.startRotation(),
          this.showConcentTop = false,
          this.showConcentTop1 = false,
          this.showConcentTopa = false,
          this.showConcentTopb = false,
          this.showConcentTopc = false,
          this.showConcentTopd = false,
          this.showConcentTope = false,
          this.showConcentTopf = false,
          this.$nextTick(() => {
            this.showConcentTop = true
            this.showConcentTop1 = true
            this.showConcentTopa = true
            this.showConcentTopb = true
            this.showConcentTopc = true
            this.showConcentTopd = true
            this.showConcentTope = true
            this.showConcentTopf = true
          })
        ]);
        console.log('数据刷新成功', new Date().toLocaleString());
      } catch (error) {
        console.error('数据刷新失败:', error);
      }
    },

    // 初始化定时器
    initRefreshTimer() {
      // 先清除旧定时器
      if (this.refreshInterval) {
        clearInterval(this.refreshInterval);
      }
      // 设置定时器 (1分钟)
      this.refreshInterval = setInterval(() => {
        this.refreshData();
      }, 60000);
    }
  },
  computed: {
    // 上面那六个
    topList() {
      return this.staticTopList.map((item) => ({
        ...item,
        num: this.dynamicData[item.key] || "0", // 默认显示 0
      }));
    },
    // 节能减排
    energyItems() {
      return [
        {label: "累计", jpKey: "ljJp", bmKey: "ljBm"},
        {label: "当年", jpKey: "dnJp", bmKey: "dnBm"},
        {label: "当月", jpKey: "dyJp", bmKey: "dyBm"},
      ];
    },
  },
  mounted() {
    // 初始化定时刷新
    this.initRefreshTimer();

    this.startAutoPlay();
    // 基础统计 中间部分
    this.baseCount();
    // 获取有效功率
    this.getValid();
    // 发电量
    this.getPower();
    // 节能减排
    // this.fetchEnergyData(); // 组件加载时获取数据
    // this.fetchData(); // 组件加载时请求数据
    this.windfarm(); // 获取风场列表
    // 初始更新
    this.updateDateTime();
    // 轮播ai-视频监控
    this.aiQuerySelectorAll();
    this.startRotation();
    // 每秒更新一次
    this.timer = setInterval(this.updateDateTime, 1000);
    // 故障情况
    this.gzqk();
    // 发电等效时排行
    this.fddxsph();
  },
  beforeDestroy() {
    this.stopAutoPlay();
    // 清除定时器，防止内存泄漏
    clearInterval(this.timer);
    this.stopRotation();
  },
};
</script>

<style scoped lang="scss">
.largeScreen {
  width: 100%;
  height: 100%;
  background-color: #000f21;
  position: relative;
}

.map-box {
  position: absolute;
  z-index: 2;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  mask: radial-gradient(closest-side ellipse, #000 60%, transparent 80%);
}

.itemBoxBg {
  background-color: rgba(0, 15, 33, 0.5);
}
.quan4{
  margin-left: -7px;
}
.quan8{
  position: absolute;
  top: 4px;
  bottom: 0;
  left: -4px;
  right: 0;
  margin: auto;
}
.wzz{
  position: absolute;
  bottom: -5px;
  left: 15px;
}
.quan7{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: 0;
  margin: auto;
}
/* 旋转动画 */
.rotating-circle {
  animation: rotate 3s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.headerBox {
  background-image: url("~@/assets/images/windPower/titleMax.png");
  background-size: 100% 100%;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  width: 100%;
  position: relative;
  z-index: 99;
  overflow: hidden; /* 确保光束不会溢出 */
  /* 光束元素样式 */
.light-beam {
  position: absolute;
  top: 0;
  left: -80%; /* 初始位置在左侧外部 */
  width: 100px;
  height: 3px;
  background: linear-gradient(to left,
              #ffffff,
              rgba(255,255,255,0.8),
              rgba(255,255,255,0.5),
              rgba(255,255,255,0.2),
              transparent);

  transform: skewX(-20deg); /* 使光束倾斜 */
  animation: beam-scan 5s linear infinite;
  z-index: 1;
}

/* 光束动画 */
@keyframes beam-scan {
  0% {
    left: -50%;
    opacity: 0;
    top: 63px;
  }
  20% {
    opacity: 0.8;
    top: 63px;
  }
  40% {
    opacity: 0.8;
    top: 63px;
  }
  43% {
    opacity: 0;
    top: 63px;

  }
  46% {
    opacity: 0;
    top: 63px;

  }
  47% {
    opacity: 0.8;
    top: 14px;
  }
  80% {
    opacity: 0.8;
    top: 14px;
  }
  90% {
    opacity: 0.8;
    top: 14px;
  }
  100% {
    left: 100%;
    opacity: 0;
    top: 14px;
  }
}

/* 确保标题内容在光束之上 */
.headerBox > * {
  position: relative;
  z-index: 2;
}
  .tabsBox {
    width: 45%;

    .tabsItemBg {
      background-image: url("~@/assets/images/windPower/tabs.png");
      background-size: 100% 100%;
      height: 40px;
      color: #45a2ff;
      position: relative;

      .down_line {
        display: none;
        position: absolute;
        background-image: url("~@/assets/images/windPower/select-tabs.png");
        background-size: 100% 100%;
        width: 80%;
        height: 33px;
        top: 22px;
      }
    }

    .tabsItemBg:hover {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }

    .selectTabsItemBg {
      color: #ffffff;

      .down_line {
        display: block;
      }
    }
  }
}

.cblue {
  color: #45a2ff;
}

.cwhite {
  color: #ffffff;
}

.cgray {
  color: #999999;
}

.chartBox {
  height: calc(100% - 100px);

  .chartLeft {
    height: calc(100% - 100px);
    position: absolute;
    z-index: 3;
    left: 20px;
    width: 450px;
  }

  .chartTile {
    color: #ffffff;
    background-image: url("~@/assets/images/windPower/titleMin.png");
    background-size: 100% 100%;
    height: 30px;
    width: 100%;
    font-weight: bold;
    font-size: 14px;
    padding-left: 30px;
    position: relative;
    overflow: hidden; // 确保光束不会溢出

    .title-text {
      position: relative;
      z-index: 2; // 确保文字在光束之上
    }

    // 光束样式
    .light-beam {
      position: absolute;
      height: 100%;
      width: 300px;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 170, 255, 0.6) 30%,
        rgba(0, 170, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: skewX(-20deg);
      z-index: 1;
      margin-top: -1.5px;
    }

    // 第一条光束
    .beam-1 {
      top: 0;
      left: -100%;
      animation: beam-sweep 4s ease-in-out infinite;
    }

    // 第二条光束
    .beam-2 {
      top: 0;
      left: -100%;
      animation: beam-sweep 4s ease-in-out infinite 2s;
    }

    // 光束动画
    @keyframes beam-sweep {
      0% {
        left: -100%;
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      70% {
        opacity: 0.8;
      }
      80% {
        left: 100%;
        opacity: 0.3;
      }
      90% {
        opacity: 0;
        left: 100%;
      }
      100% {
        left: 100%;
        opacity: 0;
      }
    }
  }

  .icon-electricity {
    color: #0aa7ff;
    // background-image: url("~@/assets/images/icon/icon-electricity.png");
    // background-size: 100% 100%;
    height: 50px;
    width: 50px;
    min-height: 50px;
    min-width: 50px;
  }
}

.leftThreeSelect {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
}

.tabSelect {
  position: absolute;
  top: 0;
  right: 0;
}

.flex3 {
  flex: 0 0 33.33%;
}

.concentTop {
  top: 10%;
}
/* 修改 concentBottom 容器 */
.concentBottom {
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* 视频盒子容器 */
.videoBox-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

.videoBox {
  flex: 0 0 100%; /* 根据你的布局调整 */
  margin-right: 20px;
  background-image: url("~@/assets/images/windPower/videoBox.png");
  background-size: 100% 100%;
  height: 133px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

/* 悬停效果 */
.videoBox:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 191, 255, 0.4);
}

/* 图片过渡效果 */
.videoContent {
  height: 98px;
  width: 100%;
  transition: all 0.3s ease;
}

.videoBox:hover .videoContent {
  transform: scale(1.05);
}

/* 标签过渡效果 */
.videoBox .cwhite {
  transition: all 0.3s ease;
}

.videoBox:hover .cwhite {
  color: #00ffff;
  text-shadow: 0 0 5px rgba(0, 191, 255, 0.8);
}



.concentBottom {
  bottom: 20px;
}

.concentBox1 {
  position: absolute;
  z-index: 3;
  left: 490px;
  width: calc(100% - 980px);

  .icon-all-box {
  width: 60px;
  height: 60px;
  min-width: 60px;
  min-height: 60px;
  background-size: 100% 100%;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1;
  filter: drop-shadow(0 0 5px rgba(0, 170, 255, 0.3));
}

/* 光晕背景 */
.icon-all-box::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.6) 0%, rgba(0, 170, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s ease;
  z-index: -1;
  animation: pulse 3s infinite ease-in-out;
}

/* 粒子效果 */
.icon-all-box::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  background:
    radial-gradient(circle at 20% 20%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 80% 30%, rgba(82, 181, 230, 0.8) 0%, transparent 10%),
    radial-gradient(circle at 40% 70%, rgba(0, 170, 255, 0.7) 0%, transparent 10%),
    radial-gradient(circle at 60% 80%, rgba(0, 170, 255, 0.5) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 1.4s ease;
  z-index: -2;
  transform: rotate(0deg);
  animation: particle-rotate 15s linear infinite;
}



/* 动画定义 */
@keyframes pulse {
  0%, 100% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes particle-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


  .videoBox {
    background-image: url("~@/assets/images/windPower/videoBox.png");
    background-size: 100% 100%;
    height: 133px;
    width: 100%;

    .videoContent {
      // background-image: url("~@/assets/images/windPower/video1.png");
      background-size: 100% 100%;
      height: 98px;
      width: 100%;
    }
    .cwhite{
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-size: 13px;
    }
  }
}
.concentBox {
  position: absolute;
  z-index: 3;
  left: 490px;
  width: calc(100% - 980px);

  .icon-all-box {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.icon-all-box1 {
  position: absolute;
  top: -3px;
  left: 0.5px;
  right: 0;
  bottom: 0;
  margin: auto;
}

/* 旋转动画 */
.rotating-image {
  animation: rotate 5s linear infinite;
  transform-origin: center center;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

}

.videoBox1 {
  align-items: baseline;
  justify-content: flex-start;
  position: relative;
  // margin: 35px 0;
  //   padding: 0 20px;
  .videoTitle {
    padding: 5px 10px;
    background-color: #1b7ef280;
  }
  .cameraItemBor {
    background: url("~@/assets/images/windPower/cameraBor.png");
    background-size: 100% 100%;
    padding: 10px;
  }
  .cameraItemBox {
    background: url("~@/assets/images/windPower/cameraImg.png");
    background-size: 100% 100%;
  }
  .cameraTitle {
    background: url("~@/assets/images/windPower/cameraTitle.png");
    background-size: 100% 100%;
    padding: 5px 10px;
  }
  .flex4 {
    flex: 0 0 25%;
    height: calc(100% / 3);
  }
    .fullScreenBox {
      position: fixed;
      bottom: 0;
      left: 20px;
      right: 20px;
      width: calc(100% - 40px);
    }
    .previewBox {
      height: 600px;
    }
  }
.rel {
  position: relative;
}

.righBox {
  height: calc(100% - 100px);
  position: absolute;
  z-index: 3;
  right: 20px;
  width: 450px;

  .fontMin {
    font-size: 10px;
  }

  .icon-ro {
    color: #0aa7ff;
    background-image: url("~@/assets/images/icon/icon-ro.png");
    background-size: 100% 100%;
    height: 45px;
    width: 45px;
    min-height: 45px;
    min-width: 45px;
  }

  .rsubtex {
    position: absolute;
    left: 30px;
    width: 50px;
    color: #0AA7FF;
  }

  .icon-rt-bg {
    background-image: url("~@/assets/images/icon/icon-rt-bg.png");
    background-size: 100% 100%;
    padding: 15px;
  }
}

//radio
::v-deep .el-radio-button--medium .el-radio-button__inner {
  padding: 5px 10px;
  border-radius: 0px;
}

::v-deep .el-radio-button {
  margin-left: 10px;
}

::v-deep .el-radio-button__inner {
  background-color: #0aa7ff1a;
  color: #ffffff;
  border: none !important;
  box-shadow: none !important;
}

::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  border: none !important;
  box-shadow: none !important;
  border-top: 2px solid #0aa7ff !important;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
}

// select选择框
::v-deep .el-select-dropdown {
  background-color: rgba(1, 28, 82, 0.8);
  border: none;
}

::v-deep .el-input__inner {
  color: #0aa7ff;
  background: linear-gradient(#0aa7ff66, #0aa7ff00);
  padding-right: 10px;
  padding-left: 10px;
}

::v-deep .el-popper .popper__arrow {
  border-bottom-color: #0aa7ff;
}

::v-deep .el-popper .popper__arrow::after {
  border-bottom-color: #0aa7ff;
}

::v-deep .el-select .el-input .el-input__inner {
  border: none;
  border-radius: 0;
  border-top: 2px solid #0aa7ff;
}

::v-deep .el-select-dropdown__item {
  background-color: rgba(1, 28, 82, 0.8);
  color: #0aa7ff;
}

::v-deep .el-select-dropdown__item.selected {
  color: #ffffff;
}

::v-deep .el-select-dropdown__item.hover,
::v-deep .el-select-dropdown__item:hover {
  background-color: #0aa7ff66;
}

::v-deep .el-input--medium .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-input--medium .el-input__icon {
  line-height: 30px;
}

// 表格
::v-deep .el-table__body-wrapper {
  font-size: 12px !important;
}
::v-deep .el-table__body-wrapper table {
  display: block!important;
  height: 300px !important;
}
::v-deep .el-table__body-wrapper {
  height: calc(100% - 30px) !important;
  font-size: 12px !important;
}

::v-deep .el-table__body-wrapper tbody {
  height: 100% !important;
}

::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

::v-deep .el-table::before {
  height: 0px;
}

::v-deep .el-table th {
  background-color: #153864cc !important;
  border-bottom: none !important;
  color: #36f5f7;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  color: #ffffff;
  height: 30px;
  margin: 10px 0;
}

::v-deep .el-table td {
  padding: 5px 0 !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: normal;
}

::v-deep .el-table .odd {
  background: #15386466 !important;
}
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.loading-overlay,
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 18px;
}

.loading-text,
.error-text {
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

/* 关键CSS：旋转视频 */
// .vertical-video {
//   transform: rotate(90deg); /* 顺时针旋转90度 */
//   transform-origin: center; /* 旋转中心 */
//   width: 100vh; /* 高度变宽度 */
//   height: 100vw; /* 宽度变高度 */
//   max-width: 100%;
//   display: block;
// }

/* 容器限制高度，避免溢出 */
// .flv-container {
//   width: 100%;
//   max-width: 100vh; /* 限制最大宽度为屏幕高度 */
//   margin: 0 auto;
//   overflow: hidden;
// }
</style>
